<template>
  <div class="app-container">
    <div class="table-container" style="margin-bottom: 20px;">
      <div class="left">
          <el-button size="small" type="primary" @click="handleLink('add')">添加</el-button>
      </div>
    </div>
    <div class="_list">
      <el-table highlight-current-row ref="tableRow" @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="专题名称" width="480">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="ID">
          <template slot-scope="scope">
            {{scope.row._id}}
          </template>
        </el-table-column>
        <el-table-column label="新建时间">
          <template slot-scope="scope">
            {{scope.row.createdAt | formatDate}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleLink('update',scope.row._id)">编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="left">
        <el-tooltip class='item' effect='dark' content='批量删除' placement='top'>
          <el-button size="small" @click="handleAll" type="danger">批量删除</el-button>
        </el-tooltip>
      </div>
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChange" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
import Upload from '@/components/Upload';
export default {
  name: 'projectList',
  mixins: [mixinsTable],
  data() {
    return {
      tab_type: '1',
      servicePath: '/nexmo/othenr'
    };
  },
  components: {
    Upload
  },
  created() {
    this.getList();
  },
  sockets: {
    connect() {
      console.log('socket connect');
    },
    news(val) {
      this.$notify.success(val);
    }
  },
  methods: {
    change_type(data, type) {
      this.$router.push({
        path: this.tab_type === '1' ? '/pages' : '/usersetup',
        query: {
          time: +new Date()
        }
      });
    },
    initForm(row) {
      this.setFormVal(row);
    },
    handleLink(state, id) {
      const query = {
        // time: +new Date()
      };
      if (state === 'update' && id) {
        query.id = id;
      }
      this.$router.push({
        path: '/pages/info/' + state,
        query: query
      });
    },
    FormClear() {
      this.setFormVal(this.form);
    },
    setFormVal(row) {
      const formArr = Object.keys(row);
      formArr.map(item => {
        this.$set(this.form, item, this.dialogState === 'update' ? row[item] : '');
      });
    },
    upload_success(val) {
      this.$set(this.form, 'img_id', val.mid);
    }
  }
};

</script>
<style lang="scss" scoped>

</style>
